<template>
  <div class="content">
    <!-- 标段基础信息 -->
    <div class="project-part">
      <div class="project-part-title">标段基础信息</div>
    </div>

    <el-row :gutter="20">
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">标段名称(合同名称)：</span>
          <span class="value">{{
            sectionInfo.name || ''
          }}</span>
        </div>
      </el-col>

      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">标段简称：</span>
          <span class="value">{{
            sectionInfo.simpleName || ''
          }}</span>
        </div>
      </el-col>

      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">合同金额(万元)：</span>
          <span class="value">{{
            sectionInfo.money || ''
          }}</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="second-row">
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">负责单位：</span>
          <span class="value">{{
            sectionInfo.dutyUnit || ''
          }}</span>
        </div>
      </el-col>

      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">建设阶段：</span>
          <span class="value">{{
            sectionInfo.stage || ''
          }}</span>
        </div>
      </el-col>

      <el-col
        :span="8"
        :style="{ minHeight: '80px' }"
        class="info-item"
      >
        <div class="table-row image">
          <span class="label">标段效果图：</span>
          <el-image
            v-if="effect.length > 0"
            :src="`${STATIC_FILE_URL}${effect[0].filePath}`"
            :preview-src-list="[
              `${STATIC_FILE_URL}${effect[0].filePath}`
            ]"
            style="
              width: 100px;
              height: 100px;
              margin-right: 8px;
            "
          />
        </div>
      </el-col>
    </el-row>

    <!-- 单位信息 -->
    <div class="project-part">
      <div class="project-part-title">单位信息</div>
    </div>

    <el-table
      :data="unitList"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
    >
      <el-table-column
        label="单位类型"
        prop="type"
        show-overflow-tooltip
      />
      <el-table-column
        label="单位名称"
        prop="name"
        width="400"
        show-overflow-tooltip
      />
      <el-table-column
        label="单位联系人"
        prop="constract"
        show-overflow-tooltip
      />
      <el-table-column
        label="单位联系方式"
        prop="telephone"
        show-overflow-tooltip
      />
    </el-table>

    <!-- 建设信息 -->
    <div class="project-part">
      <div class="project-part-title top">建设信息</div>
    </div>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="field-block">
          <span>红线面积(平方米)：</span>
          <span>{{ sectionInfo.redArea || '' }}</span>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="field-block">
          <span>总建筑面积(平方米)：</span>
          <span>{{
            sectionInfo.buildTotalArea || ''
          }}</span>
        </div>
      </el-col>
    </el-row>

    <table class="info-table">
      <tr class="info-table-name">
        <td>住宅面积（平方米）-含地下室</td>
        <td>商业面积（平方米）</td>
        <td>社区综合体（平方米）</td>
        <td>中学（平方米）</td>
        <td>小学（平方米）</td>
        <td>幼儿园（平方米）</td>
      </tr>

      <tr class="info-table-value">
        <td>{{ sectionInfo.residentialArea }}</td>
        <td>{{ sectionInfo.commercialArea }}</td>
        <td>{{ sectionInfo.communityComplexArea }}</td>
        <td>{{ sectionInfo.middleSchoolArea }}</td>
        <td>{{ sectionInfo.primarySchoolArea }}</td>
        <td>{{ sectionInfo.kindergartenArea }}</td>
      </tr>

      <tr class="info-table-name">
        <td>房源套数(套)</td>
        <td>安置户数(户)</td>
        <td>提供学位数(个)</td>
        <td>机动车位数(个)</td>
        <td>其中，充电桩数(个)</td>
        <td>人防建筑面积(平方米)</td>
        <td>海绵城市面积(平方米)</td>
      </tr>

      <tr class="info-table-value">
        <td>{{ sectionInfo.buildSourceCount }}</td>
        <td>{{ sectionInfo.households }}</td>
        <td>{{ sectionInfo.degrees }}</td>
        <td>{{ sectionInfo.carCount }}</td>
        <td>{{ sectionInfo.chargeCount }}</td>
        <td>{{ sectionInfo.peopleBuildArea }}</td>
        <td>{{ sectionInfo.cityArea }}</td>
      </tr>

      <tr class="info-table-name">
        <td>房建总评景观面积(平方米)</td>
        <td>景观工程面积(平方米)</td>
        <td>市政道路长度(公里)</td>
        <td>区域级绿道(公里)</td>
        <td>城市级绿道(公里)</td>
        <td>社区级绿道(公里)</td>
        <td>公园绿道(公里)</td>
      </tr>

      <tr class="info-table-value">
        <td>{{ sectionInfo.buildSceneryArea }}</td>
        <td>{{ sectionInfo.sceneryArea }}</td>
        <td>{{ sectionInfo.cityHallRoadLength }}</td>
        <td>{{ sectionInfo.regionGreenRoad }}</td>
        <td>{{ sectionInfo.cityGreenRoad }}</td>
        <td>{{ sectionInfo.communityGreenRoad }}</td>
        <td>{{ sectionInfo.parkGreenwayArea }}</td>
      </tr>

      <tr class="info-table-name">
        <td>市政污水管道长度(公里)</td>
        <td>市政雨水管道长度(公里)</td>
        <td>市政给水管道长度(公里)</td>
        <td>市政电力管道长度(公里)</td>
        <td>市政燃气管道长度(公里)</td>
        <td>市政综合管廊长度(公里)</td>
        <td>市政通信管道长度(公里)</td>
      </tr>

      <tr class="info-table-value">
        <td>{{ sectionInfo.sewagePipelineLength }}</td>
        <td>{{ sectionInfo.outPipelineLength }}</td>
        <td>{{ sectionInfo.inPipelineLength }}</td>
        <td>{{ sectionInfo.electricPipelineLength }}</td>
        <td>{{ sectionInfo.gasPipelineLength }}</td>
        <td>{{ sectionInfo.synthesisPipelineLength }}</td>
        <td>
          {{ sectionInfo.communicationPipelineLength }}
        </td>
      </tr>
    </table>

    <!-- 效果图及进度图 -->
    <!-- <div class="project-part">
      <div class="project-part-title top">效果图及进度图</div>
    </div> -->

    <!-- <div class="image" v-if="effectImageList.length > 0">
      效果图
      <i class="el-icon-arrow-right"></i>
      <div
        v-for="(item, index) in effectImageList"
        :key="index"
        class="image-wrapper"
      >
        <el-image
          :src="`${STATIC_FILE_URL}${item.filePath}`"
          :preview-src-list="[
            `${STATIC_FILE_URL}${item.filePath}`
          ]"
          class="image-wrapper-item"
        ></el-image>
        <div class="image-wrapper-item-text">
          {{ item.createTime }}
        </div>
      </div>
    </div>

    <div class="image" v-if="processImageList.length > 0">
      进度图
      <i class="el-icon-arrow-right"></i>
      <div
        v-for="(item, index) in processImageList"
        :key="index"
        class="image-wrapper"
      >
        <el-image
          :src="`${STATIC_FILE_URL}${item.filePath}`"
          :preview-src-list="[
            `${STATIC_FILE_URL}${item.filePath}`
          ]"
          class="image-wrapper-item"
        ></el-image>
        <div class="image-wrapper-item-text">
          {{ item.createTime }}
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import BaseSectionInfo from '../components/baseSectionInfo.vue'
import { STATIC_FILE_URL } from '@/api/config.js'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    sectionObj: Object
  },
  components: {
    Breadcrumb,
    BaseSectionInfo
  },
  data() {
    return {
      dialogImageVisible: false,
      dialogImageUrl: '',
      unitList: [],
      effectImageList: [],
      processImageList: [],
      effect: [],
      sectionInfo: {
        projectName: '',
        buildUnitName: '',
        money: '',
        buildStage: '',
        redArea: '',
        buildTotalArea: '',
        buildSourceCount: '',
        households: '',
        degrees: '',
        carCount: '',
        chargeCount: '',
        peopleBuildArea: '',
        cityArea: '',
        buildSceneryArea: '',
        hasSceneryArea: '',
        hasBuildLength: '',
        regionGreenRoad: '',
        cityGreenRoad: '',
        communityGreenRoad: '',
        sewagePipelineLength: '',
        inPipelineLength: '',
        outPipelineLength: '',
        electricPipelineLength: '',
        gasPipelineLength: '',
        synthesisPipelineLength: '',
        communicationPipelineLength: ''
      }
    }
  },
  computed: {
    titles() {
      return [this.title]
    },
    STATIC_FILE_URL() {
      return STATIC_FILE_URL
    }
  },
  watch: {
    sectionObj(val) {
      if (val.section) {
        const obj = val.section
        this.sectionInfo = val.section
        this.unitList = []
        const unit = [
          {
            type: '建设单位',
            name: obj.buildUnitName,
            constract: obj.buildUnitContract,
            telephone: obj.buildUnitWay
          },
          {
            type: '设计单位',
            name: obj.designUnitName,
            constract: obj.designUnitContract,
            telephone: obj.designUnitWay
          },
          {
            type: '勘察单位',
            name: obj.surveyUnitName,
            constract: obj.surveyUnitContract,
            telephone: obj.surveyUnitWay
          },
          {
            type: '施工单位',
            name: obj.workUnitName,
            constract: obj.workUnitContract,
            telephone: obj.workUnitWay
          },
          {
            type: '监理单位',
            name: obj.supervisorUnitName,
            constract: obj.supervisorUnitContract,
            telephone: obj.supervisorUnitWay
          }
        ]
        this.unitList = unit

        this.effect = val.sectionEffectPictureIds.length
          ? val.sectionEffectPictureIds
          : []
        this.process = val.process.length
          ? val.process.map((i) => i.progressPictureIds)[0]
          : []

        this.effect.length > 0 &&
        this.effect[0].orderIndex > -1
          ? (this.effectImageList = this.effect.sort(
              (a, b) => a.orderIndex - b.orderIndex
            ))
          : (this.effectImageList = this.effect)

        this.process.length > 0 &&
        this.process[0].orderIndex > -1
          ? (this.processImageList = this.process.sort(
              (a, b) => a.orderIndex - b.orderIndex
            ))
          : (this.processImageList = this.process)
      }
    }
  },
  mounted() {},
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList
    }
    // setUnitList() {

    // }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.content {
  .field-block {
    margin-bottom: 16px;
  }

  .field-block label {
    display: inline-block;
    width: 60px;
    font-weight: bold;
  }

  .field-block image {
    display: flex;
    align-items: center;
  }

  // .image-wrapper {
  //   display: flex;
  //   flex-wrap: wrap;
  // }

  .info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;

    &-name {
      background-color: rgb(242, 246, 251);
      height: 40px;
    }

    &-value {
      height: 40px;
    }
  }

  .info-table td {
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
  }

  // .info-item-name {
  //   background-color: #f8f8f8;
  //   font-weight: bold;
  //   text-align: center;
  // }

  // .info-item-value {
  //   color: #333;
  //   text-align: center;
  // }
  .second-row {
    margin-top: 24px;
  }

  .info-item {
    .table-row {
      display: flex;
      width: 100%;
      align-items: flex-start;
    }

    .label {
      flex-shrink: 0;
      text-align: left;
      padding-right: 8px;
      white-space: nowrap;
    }

    .value {
      flex: 1;
      text-align: left;
      word-break: break-word;
    }
  }

  .image {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;

    &-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;

      &-item {
        height: 100px;
        width: 100px;
        margin-bottom: 10px;
        margin-right: 0;
      }
    }

    .image-wrapper-item-text {
      text-align: center;
      color: gray;
      font-size: 14px;
    }

    .el-icon-arrow-right {
      font-size: 20px;
      margin-left: 6px;
      color: #999;
    }
  }

  .top {
    margin-top: 20px;
  }
}
</style>
